<template>
  <div class="">
    <H3>ProvideInjectPage页面</H3>
    <div>
      在ProvideInjectPage页面使用Provide,ProvideReactive定义数据,不需要props传递数据
      然后爷爷套父母,父母套儿子,儿子套孙子,最后在孙子组件里面获取ProvideInjectPage
      里面的信息
    </div>
    <hr/>
    {{title}}
    <Child></Child> <!--爷爷组件-->
    <button @click="handleClick">click</button>
  </div>
</template>
 
<script lang="ts">
import {
  Vue, Component, Provide, ProvideReactive,
} from 'vue-property-decorator';
import Child from '@/components/Child.vue';
 
@Component({
  components: { Child },
})
export default class ProvideInjectPage extends Vue {
  @ProvideReactive() private title = 'hello'

  handleClick() {
    this.title = 'world'
  }
}
</script>
